
import { Layout, Menu } from 'antd';
import React from 'react';
import { useLocation } from 'umi';
import { MP_ROUTES } from '../../config'

import styles from './indexLayout.less'

const { Header, Content, Sider } = Layout;

interface Props {
  children: JSX.Element
}

const IndexLayout: React.FC<Props> = (props) => {
  const { children } = props
  const { pathname } = useLocation()
  return (

    <Layout hasSider>
      <Sider
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
        }}
      >
        <div className={styles.logo} />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[pathname]} items={MP_ROUTES.map(item => (
          {
            key: item.path,
            // icon: React.createElement(icon),
            label: item.name,
          }
        ))} />
      </Sider>
      <Layout
        className={styles.siteLayout}
        style={{
          marginLeft: 200,
        }}
      >
        <Header
        />
        <Content
          style={{
            margin: '24px 16px 0',
            overflow: 'initial',
          }}
        >
          <div
            className={styles.siteLayoutBackground}
          >
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  )
};

export default IndexLayout
export { IndexLayout }